<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="./css/shopping/reset.css">
  <link rel="stylesheet" href="./css/shopping/shopping.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="header-nav">
      <div class="wrapper nav">
        <div class="nav-left">
          <ul style="display: flex;">
            <li>
              <a href="./index.html">首页</a>
            </li>
            <li>
              <img src="./img/iconfont/定位.png" alt="">
              <a href="">浙江</a>
              <div class="nav-left-second">
                <div>
                  <span>北京</span>
                  <span>上海</span>
                  <span>天津</span>
                  <span>天津</span>
                  <span>河北</span>
                  <span>河南</span>
                  <span>辽宁</span>
                  <span>吉林</span>
                  <span>黑龙江</span>
                  <span>内蒙古</span>
                  <span>江苏</span>
                  <span>山东</span>
                  <span>安徽</span>
                  <span>浙江</span>
                  <span>福建</span>
                  <span>湖北</span>
                  <span>湖南</span>
                  <span>广东</span>
                  <span>广西</span>
                  <span>江西</span>
                  <span>四川</span>
                  <span>贵州</span>
                  <span>云南</span>
                  <span>西藏</span>
                  <span>陕西</span>
                  <span>甘肃</span>
                  <span>青海</span>
                  <span>宁夏</span>
                  <span>新疆</span>
                  <span>港澳</span>
                  <span>台湾</span>
                  <span>钓鱼岛</span>
                  <span>海外</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <nav class="nav-right">
          <ul>
            <li>
              <p><a href="./login.html">你好,请登入</a></p>
              &nbsp; &nbsp;
              <a href="./reg.html" class="active">免费注册</a>
            </li>
            <span>|</span>
            <li>
              <p> <a href="">我的订单</a></p>
            </li>
            <span>|</span>
            <li class="my-jd">
              <p>
                <a href="">我的京东</a>
              </p>
              <div>
                <p>
                  <span>待处理订单</span>
                  <span>我的问答</span>
                  <span>返修退货</span>
                  <span>我的关注</span>
                  <span>降价商品</span>
                </p>
                <p>
                  <span>我的京东</span>
                  <span>我的优惠卷</span>
                  <span>我的白条</span>
                  <span>我的理财</span>
                </p>
              </div>
            </li>
            <span>|</span>
            <li>
              <p> <a href="">京东会员</a></p>
            </li>
            <span>|</span>
            <li class="qeb">
              <a href="" class="active">企业采购</a>
              <div>
                <p>
                  <span>企业购</span>
                  <span>公共频道</span>
                  <span>工业品</span>
                  <span>商用场景馆</span>
                  <span>礼品卡</span>
                  <span>企业微信购</span>
                  <span>工品优选</span>
                  <span>京东锦礼</span>
                  <span>大中型客户采购</span>
                </p>
              </div>
            </li>
            <span>|</span>
            <li class="service">
              <a href="">客户服务</a>
              <div>
                <dl>
                  <dt>客户</dt>
                  <dd>帮助中心</dd>
                  <dd>售后服务</dd>
                  <dd>在线客服</dd>
                  <dd>意见建议</dd>
                  <dd>电话客服</dd>
                  <dd>客服邮箱</dd>
                  <dd>金融咨询</dd>
                  <dd>全球售客服</dd>
                  <dd>企业客服</dd>
                </dl>
                <dl>
                  <dt>商户</dt>
                  <dd>帮助中心</dd>
                  <dd>售后服务</dd>
                  <dd>在线客服</dd>
                  <dd>意见建议</dd>
                  <dd>电话客服</dd>
                  <dd>客服邮箱</dd>
                </dl>
              </div>
            </li>
            <span>|</span>
            <li class="map">
              <a href="">网站导航</a>
              <div>
                <dl>
                  <dt>特色主题</dt>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                </dl>
                <dl>
                  <dt>特色主题</dt>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                </dl>
                <dl>
                  <dt>特色主题</dt>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                  <dd>新品首发</dd>
                  <dd>京东金融</dd>
                  <dd>全球售</dd>
                  <dd>国际站</dd>
                </dl>
              </div>
            </li>
            <span>|</span>
            <li class="phon-jd">
              <a href="">手机京东</a>
              <div>
                <ul>
                  <li>
                    <div class="box-img">
                      <img src="./img/header/erweima.png" alt="">
                    </div>
                    <div class="box-text">
                      <p>我的京东</p>
                      <p>新人专享大礼包</p>
                    </div>
                  </li>

                  <li>
                    <div class="box-img">
                      <img src="./img/header/erweima.png" alt="">
                    </div>
                    <div class="box-text">
                      <p>我的京东</p>
                      <p>新人专享大礼包</p>
                    </div>
                  </li>
                  <li>
                    <div class="box-img">
                      <img src="./img/header/erweima.png" alt="">
                    </div>
                    <div class="box-text">
                      <p>我的京东</p>
                      <p>新人专享大礼包</p>
                    </div>
                  </li>
                  <li>
                    <div class="box-img">
                      <img src="./img/header/erweima.png" alt="">
                    </div>
                    <div class="box-text">
                      <p>我的京东</p>
                      <p>新人专享大礼包</p>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <span>|</span>
            <li>
              <p><a href="">网站无障碍</a></p>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <!-- 主体 -->
  <div id="main">
    <div class="wrapper">
      <div class="box1">
        <div class="logo">
          <img src="./img/shopping/jdlogo-201708-@1x.png" alt="">
        </div>
        <div class="search">
          <input type="text">
          <button>搜索</button>
        </div>
      </div>
      <div class="box2">
        <a href="">全部商品 1</a>
        <p>
          <span>配送至</span>
          <select name="" id="">
            <option value="">
              广东广州市白云区同和街道
            </option>
          </select>
        </p>
      </div>
      <div class="box3">
        <div>
          <p>
            <input class="allcheckbox1" type="checkbox">
            <span >全选</span>
          </p>
          <span>商品</span>
        </div>
        <div>
          <p>
            <span>单价</span>
            <span>数量</span>
          </p>
          <p>
            <span>小计</span>
            <span>操作</span>
          </p>
        </div>
      </div>
      <div class="box4">
        <p>
          <input type="checkbox" class="allcheckbox1">
          <span>努比亚京东自营旗舰店</span>
          <i></i>
        </p>
        <p></p>
        <p></p>
      </div>
      <!-- <div class="box5">
        <div class="box5-top">
          <div class="box5-left">
            <div>
              <input type="checkbox">
              <img src="./img/shopping/shopping-1.jpg" alt="">
            </div>
            <div>
              <p>努比亚 nubia 红魔7 Pro 12GB+256GB赛博霓虹 120Hz屏幕</p>
              <p>
                <img src="./img/shopping/设置.png" alt="">
                <span>选服务</span>
              </p>
            </div>
            <p>
              <span>赛博霓虹</span><br>
              <span>12GB+256GB</span>
            </p>
          </div>
          <div class="box5-right">
            <p>￥4,699.00</p>
            <div>
              <ul>
                <li>-</li>
                <li>1</li>
                <li>+</li>
                <span>有货</span>
              </ul>
            </div>
            <p class="weight">￥4699.00</p>
            <p class="active">
              <span>删除</span>
              <br>
              <span>移入关注</span>
            </p>
          </div>
        </div>
        <div class="box5-bottom">
          <p>
            【赠品】体验卡免费领，多款APP免流，超大流量任性用，点击领取
          </p>
          <p>
            <span>x1</span>
            <span>查看价格</span>
          </p>
        </div>
      </div> -->
      <div class="box6">
        <div class="box6-left">
          <p>
            <input type="checkbox" class="allcheckbox1">
            <span>全选</span>
          </p>
          <p>
            <a href="">删除选中的商品</a>
            <a href="">移入关注</a>
            <a href="">清理购物车</a>
          </p>

        </div>
        <div class="box6-right">
          <p>
            已选择 <span class="preNum">0</span> 件商品人
          </p>
          <p>
            总价：<span class="allprice">￥0.00</span>
          </p>
          <p>
            <button type="button">去结算</button>
          </p>
        </div>
      </div>
      <div class="box7">
        <h3>购物车帮你选</h3>
        <p>看看加购过该商品的人还喜欢哪些</p>
      </div>
      <div class="box8">
        <div class="box8-top">
          <div>
            <img src="./img/shopping/shopping-1.jpg" alt="">
          </div>
          <div>
            <p>
              <a href="">努比亚 nubia 红魔7 Pro 12GB+256GB赛博霓虹 120Hz屏幕刷新率 全新骁龙8平台 135W快充 5G电竞游戏手机</a>
            </p>
            <p>赛博霓虹 12GB+256GB</p>
            <p><span>￥4699.00</span></p>
          </div>
        </div>
        <div class="box8-bottom">
          <div>
            <div class="box8-img">
              <img src="./img/shopping/phon.jpg" alt="">
            </div>
            <div class="box8-text">
              <p>小米12 骁龙8 Gen1 黄金手感 6.28英寸视感屏 120Hz高刷 5000万超清主摄 </p>
              <p><span>￥3699.00</span></p>
              <p>1人已购买</p>
            </div>
          </div>
          <div>
            <div class="box8-img">
              <img src="./img/shopping/phon.jpg" alt="">
            </div>
            <div class="box8-text">
              <p>小米12 骁龙8 Gen1 黄金手感 6.28英寸视感屏 120Hz高刷 5000万超清主摄 </p>
              <p><span>￥3699.00</span></p>
              <p>1人已购买</p>
            </div>
          </div>
          <div>
            <div class="box8-img">
              <img src="./img/shopping/phon.jpg" alt="">
            </div>
            <div class="box8-text">
              <p>小米12 骁龙8 Gen1 黄金手感 6.28英寸视感屏 120Hz高刷 5000万超清主摄 </p>
              <p><span>￥3699.00</span></p>
              <p>1人已购买</p>
            </div>
          </div>
          <div>
            <div class="box8-img">
              <img src="./img/shopping/phon.jpg" alt="">
            </div>
            <div class="box8-text">
              <p>小米12 骁龙8 Gen1 黄金手感 6.28英寸视感屏 120Hz高刷 5000万超清主摄 </p>
              <p><span>￥3699.00</span></p>
              <p>1人已购买</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <footer class="footer">
    <div class="footer-1">
      <ul>
        <li>
          <div>
            <p></p>
            <p>品类齐全，轻松购物</p>
          </div>
        </li>
        <li>
          <div>
            <p></p>
            <p>品类齐全，轻松购物</p>
          </div>
        </li>
        <li>
          <div>
            <p></p>
            <p>品类齐全，轻松购物</p>
          </div>
        </li>
        <li>
          <div>
            <p></p>
            <p>品类齐全，轻松购物</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="footer-2">
      <div class="footer-dl wrapper ">
        <dl>
          <dt>购物指南</dt>
          <dd>购物流程</dd>
          <dd>会员介绍</dd>
          <dd>常见问题</dd>
          <dd>生活旅行</dd>
          <dd>大家电</dd>
          <dd>联系存服</dd>
        </dl>
        <dl>
          <dt>配送方式</dt>
          <dd>上门自提</dd>
          <dd>211限时达</dd>
          <dd>配送服务查询</dd>
          <dd>配送费收取标准</dd>
          <dd>海外配送</dd>

        </dl>
        <dl>
          <dt>支付方式</dt>
          <dd>货到付款</dd>
          <dd>在线支付</dd>
          <dd>分期付款</dd>
          <dd>公司转账</dd>

        </dl>
        <dl>
          <dt>售后服务</dt>
          <dd>售后政策</dd>
          <dd>价格保护</dd>
          <dd>退款说明</dd>
          <dd>返修/退换货</dd>
          <dd>取消订单</dd>

        </dl>
        <dl>
          <dt>特色服务</dt>
          <dd>特色服务</dd>
          <dd>DIY装机</dd>
          <dd>延保服务</dd>
          <dd>京东E卡</dd>
          <dd>京东通信</dd>
          <dd>京鱼座智能</dd>
        </dl>
        <dl class="last">
          <dt>京东自营覆盖区县</dt>
          <dd>
            京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
          </dd>
          <dd>查看详情></dd>
        </dl>
      </div>
    </div>
    <div class="wrapper footer-3 ">
      <p>
        <a href="">关于我们</a>
        <span>|</span>
        <a href="">联系我们</a>
        <span>|</span>
        <a href="">联系客服</a>
        <span>|</span>
        <a href="">合作招商</a>
        <span>|</span>
        <a href="">商家帮助</a>
        <span>|</span>
        <a href="">营销中心</a>
        <span>|</span>
        <a href="">手机京东</a>
        <span>|</span>
        <a href="">友情链接</a>
        <span>|</span>
        <a href="">销售联盟</a>
        <span>|</span>
        <a href=""> 京东社区</a>
        <span>|</span>
        <a href="">风险监测</a>
        <span>|</span>
        <a href=""> 隐私政策</a>
        <span>|</span>
        <a href="">京东公益</a>
        <span>|</span>
        <a href=""> English Site</a>
        <span>|</span>
        <a href="">Media & IR</a>
      </p>
      <p>
        <a href="">京公网安备0100002000088号</a>
        <span>|</span>
        <a href="">京ICP备11041704号</a>
        <span>|</span>
        <a href="">ICP</a>
        <span>|</span>
        <a href="">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
        <span>|</span>
        <a href="">新出发京零 字第大120007号</a>

      </p>
      <p>
        <a href="">互联网出版许可证编号新出网证(京)字150号</a>
        <span>|</span>
        <a href="">出版物经营许可证</a>
        <span>|</span>
        <a href="">网络文化经营许可证京网文[2020]6112-1201号 </a>
        <span>|</span>
        <a href="">违法和不良信息举报电话：4006561155</a>
      </p>
      <p>
        <a href="">Copyright © 2004 - 2022 京东JD.com 版权所有</a>
        <span>|</span>
        <a href="">消费者维权热线: 40060677331经营证照</a>
        <span>|</span>
        <a href="">(京)网械平台备字(2018)第00003号</a>
        <span>|</span>
        <a href="">营业执照</a>
        <span>|</span>
        <a href="">增值电信业务经营许可证</a>
      </p>
      <p>
        <span class="span-img"></span>
        <a href="">Global Site</a>
        <span>|</span>
        <span class="span-img"></span>
        <a href="">CanT Pocchn</a>
        <span>|</span>
        <span class="span-img"></span>
        <a href="">Situs Indonesia</a>
        <span>|</span>
        <span class="span-img"></span>
        <a href="">Sitio de Espana</a>
        <span>|</span>
        <span class="span-img"></span>
        <a href="">เว็บไซต์ประเทศไทย</a>
      </p>
      <p>
        <a href="">京东旗下网站: &nbsp; 京东钱包</a>
        <span>|</span>
        <a href="">京东云</a>
        <span>|</span>
        <a href="">网络内容从业人员违法违规行为举报电话：4006561155-3</a>
      </p>
      <p>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
      </p>
    </div>
  </footer>
</body>

</html>
<script src="./js/shop.js" type="module"></script>